﻿@{
    //ViewBag.Title = "Salary";
    //Layout = "~/Views/Shared/_Layout.cshtml";
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="~/assets/bootstrap/js/jquery-1.10.2.min.js"></script>
</head>
<body>
    <div style="padding: 16px">
        <div class="layui-container" style="width:1200px;height:auto">
            <div class="layui-col-md2">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                </fieldset>
                <div id="YearTree" class="demo-tree-more"></div>
            </div>
            <div class="layui-col-md9">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <h3>员工薪资</h3>
                        <div class="layui-btn-container" style="text-align: right;">
                            <button class="layui-btn layui-btn-xs" id="ExcelBtn">生成 Excel 表</button>
                        </div>
                        <table class="layui-hide" id="sa" lay-filter="sa"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        layui.use(['table', 'tree', 'util'], function () {
            var table = layui.table;
            var util = layui.util;
            var tree = layui.tree
                , layer = layui.layer
                , util = layui.util
            const currentYear = new Date().getFullYear(); // 获取当前年份
            const treeData = generateTreeData(currentYear);
            //console.log(treeData)
            // 渲染树形结构
            tree.render({
                elem: '#YearTree',
                data: treeData,
                showLine: false,  // 不显示连接线
                click: function (obj) {
                    const data1 = obj.data;
                    // 如果选择的是年份节点，则触发相应的操作
                    //} else if(data1.id === 1) {
                    //table.reload('demo', {
                    //    where: { d_id: currentYear }  // 当前年份的数据
                    //});
                    if (data1.id === 0) {
                        table.reload('sa', {
                            where: { d_id: "" }  // 全部数据
                        });
                    } else {
                        console.log(data1.id)
                        // 根据选择的年月进行筛选
                        table.reload('sa', {
                            where: { d_id: data1.id }
                        });
                    }
                }
            });

            // 生成树形数据
            function generateTreeData(currentYear) {
                const years = [currentYear, currentYear - 1, currentYear - 2];
                const treeData = years.map(year => {
                    const months = Array.from({ length: 12 }, (_, index) => ({
                        title: `${index + 1}月`,
                        id: `${year}-${index + 1}`  // 格式：年-月（例如：2025-1）
                    }));
                    return {
                        title: `${year}年`,
                        id: year,  // 年份作为id
                        children: months
                    };
                });

                // 追加“全部”节点
                return [
                    {
                        title: '全部',
                        id: 0,
                        children: treeData
                    }
                ];
            }
            console.log(1)
            //第一个实例
            table.render({
                elem: '#sa'
                , defaultToolbar: []
                , height: "full-100"// 最大高度减去其他容器已占有的高度差
                , url: '/Salary/DataList' //数据接口
                , page: true //开启分页
                , limit: 10 //每页默认显示的数量
                , cols: [[
                    { field: 'Name', title: '姓名' }
                    , { field: 'RoleName', title: '角色' }
                    , { field: 'Numbers', title: '员工编号' }
                    , { field: 'BaseSalary', title: '底薪' }
                    , { field: 'ExtraSalary', title: '绩效' }
                    , { field: 'TotalSalary', title: '薪资' }
                    , { fixed: 'right', title: '操作', width: 90, toolbar: '#sad' }
                ]]
            });
            table.on('tool(sa)', function (obj) { // 双击 toolDouble
                var data = obj.data;
                // console.log(data.Id)
                if (obj.event === 'SalaryDetail') {
                    layer.open({
                        title: data.Name + '薪资明细',
                        type: 2,
                        area: ['80%', '80%'],
                        content: '/Salary/SalaryDetail?s_id=' + data.Id,
                    });
                }
            });

            // 导出Excel按钮点击事件
            $('#ExcelBtn').on('click', function () {
                window.location.href = `/salary/ServiceDetail`;
            
                //$.ajax({
                //    url: '/Salary/ExportExcel',   //调用控制器方法
                //    type: 'POST',
                //    success: function (res) {
                //        layer.closeAll();
                //        if (res.code == 0) {
                //            layer.msg(res.message, { icon: 1 });

                //            // 可选：添加下载链接
                //            var downloadBtn = '<a href="file:///' + res.path.replace(/\\/g, '/') +
                //                '" class="layui-btn layui-btn-sm layui-btn-normal" style="margin-left:10px">下载Excel</a>';
                //            layer.msg(res.message + downloadBtn, {
                //                icon: 1,
                //                time: 5000
                //            });
                //        } else {
                //            layer.msg(res.message, { icon: 2 });
                //        }
                //    },
                //    error: function () {
                //        layer.closeAll();
                //        layer.msg('生成失败，请重试', { icon: 2 });
                //    }
                //});
            });
        });


    </script>
    <script type="text/html" id="sad">
        <div class="layui-clear-space">
            <a class="layui-btn layui-btn-xs" lay-event="SalaryDetail">薪资明细</a>
        </div>
    </script>
</body>
</html>